<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<style>
.listBox {
	overflow: scroll;
	overflow-X: hidden;
}
</style>
<div class="wrapper wrapper-content animated fadeInRight blog">

	<!--操作开始-->
	<div class="subTitle" style="margin-top: 15px">
		<div class="horizontal-line"></div>
		<div class="title-text">服务案例</div>
	</div>
	<div class="ibox float-e-margins">
		<div class="ibox-content row">

			<div class="col-md-5">
				<form action="index.html" method="get">
					<div class="input-group">
						<input id="searchText" type="text" placeholder="搜索文章（标题、关键字、以及分类）" name="search"
							class="form-control input-lg">
						<div class="input-group-btn">
							<button onclick="getSearch()" type="button" class="btn btn-w-m btn-primary">
								<i class="fa fa-search"></i>&nbsp;&nbsp;搜索
							</button>
						</div>
					</div>
				</form>
			</div>
			<!--col-md-5-->

			<div class="col-md-7 text-right">
				<a type="button" class="btn btn-w-m btn-info"
					href="<%=basePath%>View/pages/articleEdit/add/0"><i class="fa fa-plus"></i>&nbsp;&nbsp;新增文章</a>
			</div>
			<!--col-md-7-->

		</div>
	</div>
	<!--操作结束-->

	<div class="row" id="listBox">

	</div>
	<!--row-->
</div>
<script>
var current = 1;
$(function() {
	getData();
	window.onscroll = function() {
		if ($(document).scrollTop() >= ($(document).height()- $(window).height() - 50)) {
			current++;
			getData();
			}
	}
});

function getData(){
	var words = $('#searchText').val();
	$.ajax({
		url:'<%=basePath%>Article/getArticle',
		type:'POST',
		dataType:'JSON',
		data:{
			'page':current,
			'count':9,
			'type':'case',
			'words':words
		},
		success:function(data){
			if (data.code=='200'){
				$(data.data).each(function(index,ele){
					$('#listBox').append('<div id="art'+ele.id+'" class="ibox col-md-4"><div class="ibox-content"><a href="#" class="btn-link">'+
					'<h2>'+ele.title+'</h2></a><div class="small m-b-xs"><span class="text-muted"><i class="fa fa-clock-o"></i>'+ele.createDate+'</span>&nbsp;&nbsp;&nbsp;<span class="text-muted"><i class="fa fa-eye"></i>&nbsp;'+ele.viewCount+'</span></div>'+
					'<p>'+ele.subContent+'</p>'+
					'<div class="row"><div class="col-md-6"><h5>标签：</h5><button class="btn btn-outline btn-info" type="button">'+ele.tag+'</button></div>'+
					'<div class="col-md-6"><div class="small text-right"><h5>操作：</h5>'+
					'<a class="btn btn-primary btn-xs" href="<%=basePath%>View/pages/articleEdit/edit/'+ele.id+'"><i class="fa fa-edit"></i>&nbsp;&nbsp;编辑文章</a> <button data-id="'+ele.id+'" onclick="del(this)" class="btn btn-danger btn-xs" type="button">'+
					'<i class="fa fa-trash"></i>&nbsp;&nbsp;删除文章</button></div></div></div></div></div>')
				})
			} else{
				toastr.success(data.message,'提示');
			}
		},
		error:function(){
			toastr.error('网络异常','失败');
		}
	})
}

function getSearch(){
	current = 1;
	$('#listBox').html('');
	getData();
}

function del(obj){
	new $.flavr({
		content : '确认删除？',
        dialog : 'confirm', 
        onConfirm : function(){ 
        	var id = $(obj).attr('data-id');
        	var art = $('#art'+id);
    		$.ajax({
    			url:'<%=basePath%>Article/del',
    			type : 'POST',
    			dataType : 'JSON',
    			data : {
    				'id' : id,
    			},
    			success : function(data) {
    				if (data.code == '200') {
    					toastr.success('提交成功', '操作成功');
    					$(art).fadeOut(300);
    				} else {
    					toastr.warning(data.message, '操作失败');
    				}
    			},
    			error : function() {
    				toastr.error('服务器发烧了>_<,请稍后再试', '网络异常');
    			}
    		});
        }, 
        onCancel : function(){
        	toastr.warning('取消操作','取消操作');
       	 } 
     });		
}
</script>





